I am building a website that fetches images from NASA's API. Now, I would like to add description to those images but I don't want all the description to be shown. Thus, I want to add a read more button/link to it. The text content(or description of the image) will change every day. And so I don't know at which word to put the button. Is there any way that I can put button after certain number of rows?
Any help or input is highly appreciated, thanks.
You can store the full text content in a data attribute then display it once the button is clicked.
Just base whether or not there is a read more button on the length of the description string given back by the API.
<div id="main"></div>
<script>
const main = document.querySelector('#main');
const posts = [
{
image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png',
description:
'Long description lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, augue ac feugiat venenatis, eros tortor fringilla leo, quis posuere dui lectus in velit. Suspendisse consectetur orci quis elit congue mollis. Cras eget lorem faucibus, dictum nisi eget, elementum velit. Integer imperdiet hendrerit velit, id porttitor nunc vestibulum vel. Integer ut congue lectus, id ullamcorper neque. Curabitur non pharetra urna, ac euismod magna. Proin sit amet mollis leo. Vestibulum in nunc sed mi feugiat pellentesque. Donec vel molestie lacus. Nam dictum imperdiet tortor pellentesque posuere. Nullam arcu nisl, rhoncus hendrerit condimentum et, bibendum porta sapien.',
},
{
image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png',
description: 'Short description.',
},
{
image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png',
description:
'Medium description length. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, augue ac feugiat venenatis,',
},
];
const createPost = ({ image, description }) => {
const div = document.createElement('div');
const img = document.createElement('img');
img.setAttribute('src', image);
img.style.maxWidth = 200 + 'px';
const text = document.createElement('p');
div.appendChild(img);
if (description.length > 50) {
text.innerText = `${description.slice(0, 50)}...`;
text.setAttribute('data-full', description);
const btn = document.createElement('button');
btn.innerText = 'Read more...';
btn.setAttribute('onclick', 'displayPost(this)');
div.appendChild(text);
div.appendChild(btn);
return div;
}
text.innerText = description;
div.appendChild(text);
return div;
};
posts.forEach((post) => {
const element = createPost(post);
main.appendChild(element);
});
const displayPost = (elem) => {
elem.previousSibling.innerText = elem.previousSibling.getAttribute('data-full');
elem.remove();
};
</script>Add 2 element and put part of the text up until the row you want the button to be at using JavaScript (I'll tell that later), add visibility:"hidden" as one of the properties of the div2 after you use the Javascript, add the read more button after the first div and before the second div, add an onclick:"document.getElementById("idOfThe2ndDiv).visibility = "visible"; " to the button. Now I'll tell how to use the JavaScript.
var text = "lorem ipsum dolor sit amet" //make the text the description of the image
var part1 = text.slice(0, num); //replace num with the amount of characters you want
var part2 = text.slice(num);
document.getElementById("idOfThe1stDiv").InnerHTML = part1;
document.getElementById("idOfThe2ndDiv").innerHTML = part2;